<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="300" :height="370" :left="uiLeft" :top="uiTop">
        <div class="box">
            <!-- 功能按钮 -->
            <div class="cimrts-menu">
                <FucMenuList :menuList="treeAddMenuList" @clickComponent="clickComponent" :isDisabled="false"
                    :isChecked="true" />
            </div>
            <div class="box-choose">
                <div>
                    <span>树种：</span>
                    <el-select v-model="currentTreeModelClassNameRef" placeholder="请选择" style="width:150px" clearable
                        @clear="clearTreeModelClassName">
                        <el-option v-for="item in treeModelClassesRef" :key="item.id" :label="item.name"
                            :value="item.name" />
                    </el-select>
                </div>
                <div>
                    <span>树高：</span>
                    <el-input-number v-model="shugaoRef" controls-position="right" :min="0" />
                </div>
                <div>
                    <span>胸径：</span>
                    <el-input-number v-model="xiongjingRef" controls-position="right" :min="0" />
                </div>
                <div>
                    <span>枝下高：</span>
                    <el-input-number v-model="zhixiagaoRef" controls-position="right" :min="0" />
                </div>
                <div>
                    <span>东西冠幅：</span>
                    <el-input-number v-model="dongxiguanfuRef" controls-position="right" :min="0" />
                </div>
                <div>
                    <span>南北冠幅：</span>
                    <el-input-number v-model="nanbeiguanfuRef" controls-position="right" :min="0" />
                </div>
            </div>

        </div>
    </Dialog>
</template>
<script setup lang="ts">
import FucMenuList from "@/components/common/FucMenuList.vue";
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { treeAddMenuList } from "@/scripts/menu/forest/treeAddMenuList";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import {
    createVueDisposer,
    toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};
const uiLeft = document.body.clientWidth - 10 - 300;
// const uiTop = document.body.clientHeight - 40 - 200;
const uiTop = ref(60);


const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const eSForestManager = getProjectManager().eSForestManager;
const eSForest = eSForestManager.eSForest;
const addTree = eSForestManager.addTree;


const currentDialog = ref<any>(undefined);

const forestPropSceneTree = toVR<any>(d, [objm, "forestPropSceneTree"])

// 操作多边形
const isHighlightRef = toVR<string>(d, [addTree, "isHighlight"])
// 树种
const treeModelClassesRef = toVR<any>(d, [addTree, "treeModelClasses"])
// 当前选中树种
const currentTreeModelClassNameRef = toVR<string>(d, [addTree, "currentTreeModelClassName"])
// 树高
const shugaoRef = toVR<string>(d, [addTree, "shugao"])
// 胸径
const xiongjingRef = toVR<string>(d, [addTree, "xiongjing"])
// 枝下高
const zhixiagaoRef = toVR<string>(d, [addTree, "zhixiagao"])
// 东西冠幅
const dongxiguanfuRef = toVR<string>(d, [addTree, "dongxiguanfu"])
// 南北冠幅
const nanbeiguanfuRef = toVR<string>(d, [addTree, "nanbeiguanfu"])

// 鼠标点击组件
const clickComponent = (item: any) => {
    isHighlightRef.value = item.id;
    if (!currentTreeModelClassNameRef.value) return;
    item.status != "active" ? item.status = "active" : item.status = "none";
    if (item.status == "none") {
        isHighlightRef.value = ''
        objm.forestPropSceneTree = undefined
    }
}

watch(forestPropSceneTree, (val) => {
    if (forestPropSceneTree.value) return;
    if (isHighlightRef.value) {
        const item = treeAddMenuList.value.find((item: any) => item.id == isHighlightRef.value);
        // @ts-ignore
        item.status = 'none'
    }
    objm.forestPropSceneTree = undefined
    isHighlightRef.value = ''
})

const clearTreeModelClassName = () => {
    currentTreeModelClassNameRef.value = ''
}

onMounted(() => {
});
onBeforeUnmount(() => {
    addTree.clear();
    treeAddMenuList.value.map((i: any) => i.status = "none")
});
</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.cimrts-menu {
    background-color: #f0f0f0;
    width: calc(100%);
    height: 40px;
    display: flex;
}

.box-choose {
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.box-choose>div {
    display: grid;
    grid-template-columns: 80px 1fr;
    /* justify-content: center; */
    align-items: center;
}

.box-choose div span {
    width: 80px;
    display: inline-block;
}

.box-choose>div .el-input,
.box-choose>div .el-select {
    width: 350px;
}
</style>